//     合同列表：Contractlist

import React, { useState } from 'react'
import 'antd/dist/antd.css'
import './index.scss'

import { Select, Form, Input, DatePicker, Space, Button, Table, Modal } from 'antd'


// 表格数据列表对象
const data = []
for (let i = 0; i <= 46; i++) {
    data.push({
        id: i,
        contract_no: '1257701',
        contract_name: '借款协议',
        phone: '1556584564',
        datel: '2019-01-25',
        source: '消费金融服务平台',
        state: '草稿',
    })
}

const columns = [
    {
        title: '合同ID',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
    },
    {
        title: '合同编号',
        dataIndex: 'contract_no',
        key: 'contract_no',
        align: 'center',
    },
    {
        title: '合同名称',
        dataIndex: 'contract_name',
        key: 'contract_name',
        align: 'center',
    },
    {
        title: '发起人手机号',
        dataIndex: 'phone',
        key: 'phone',
        align: 'center',
    },
    {
        title: '完成时间',
        dataIndex: 'datel',
        key: 'datel',
        align: 'center',
    },
    {
        title: '合同来源',
        dataIndex: 'source',
        key: 'source',
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'key',
        align: 'center',
        width: 200,
        render: text =>
            <div className="spans">
                <Button size="small" type='text'>查看</Button>
                <Button size="small" type='text'>下载</Button>
            </div>
    },

]


const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

export default function Contractlist() {
    const [selectionType, setSelectionType] = useState('checkbox');

    function handleChange1(value) {
        console.log(`selected ${value}`);
    }
    function handleChange2(value) {
        console.log(`selected ${value}`);
    }
    return (
        <div className='contractlist'>
            <div className='num'>
                <div className='num1'>
                    <p className='p1'>20</p>
                    <p className='p2'>今天合同总数</p>
                </div>
                <div className='num2'>
                    <p className='p1'>200</p>
                    <p className='p2'>近七天合同总数</p>
                </div>
                <div className='num3'>
                    <p className='p1'>2000</p>
                    <p className='p2'>近30天合同总数</p>
                </div>
                <div className='num4'>
                    <p className='p1'>20000</p>
                    <p className='p2'>全部合同总数</p>
                </div>
            </div>
            <div className='hetong_head'>
                {/* 顶部头 */}
                <div className="dingbu_head">
                    <p className="text">查询条件</p>
                    <div className="dingbu_head_right">
                        <Button type="primary">查询结果</Button>
                        <Button type="primary">高级检索</Button>
                    </div>
                </div>
                {/* 顶部主体 */}
                <div className='dingbu_body'>
                    <Form>
                        <Form.Item label='合同编号：'>
                            <Input />
                        </Form.Item>
                        <Form.Item label='发起人：'>
                            <Input />
                        </Form.Item>
                        <Form.Item label='提交时间：'>
                            <Input />
                        </Form.Item>
                    </Form>
                </div>
            </div>
            {/* 表格主体 */}
            <div className='table_content'>
                {/* 表格头部 */}
                <div className="table_head">
                    <p className="text_list">合同列表</p>

                    <Form className='table_head_right'>
                        <Form.Item><Button type="primary">导出数据</Button></Form.Item>
                        <Form.Item>
                            <Select defaultValue="显示条数" style={{ width: '150px' }} onChange={handleChange1}>
                                <Select.Option value="1">12222</Select.Option>
                                <Select.Option value="2">1111</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Select defaultValue="排列方式" style={{ width: '150px' }} onChange={handleChange2}>
                                <Select.Option value="1">11111</Select.Option>
                                <Select.Option value="2">22222</Select.Option>
                            </Select>
                        </Form.Item>
                    </Form>

                </div>
                {/* 表格主体 */}
                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={data}
                />
            </div>
        </div>
    )
}
